<template>  
    <div style="display: flex;">
        <!-- 商品标题 商品ID 商家编码 输入框-->
        <div>
            <el-input v-model="goodsName" style="width: 250px;height: 45px" placeholder="商品名"></el-input>
        </div>
         <!-- 商品分类下拉选项框 -->
        <div class="shop_type">  
            <span style="color: rgb(168, 171, 178); margin-left: 10px; width: 100px;">商品分类</span>  
            <el-cascader 
                placeholder="您可以尝试输入您想要查询的类别"
                :options="goodsType"
                :props="props"
                filterable
                v-model="goodsTypeValue"
                @change="getTableDate"
                style="width: 260px;"
                />
        </div>  
        <el-button class="search" type="info" palin @click="getTableDate">搜索</el-button>
    </div>
    <div style="display: flex; margin-top: 10px;">
      <div >
        <!-- 批量恢复按钮 -->
        <el-button class="delete" type="primary" @click="batchRehabilitation">批量恢复</el-button>
      </div >
    </div>
  <div style="height: 521px;margin-top: 20px;">
        <!-- 商品信息展示列表 -->
      <el-table  ref="multipleTableRef"
        class="el-tb" 
        header-row-class-name="tb-header" 
        :data="rawData.records"
        @selection-change="handleSelectionChange"  
        row-key="id"    
        max-height="900px">
        <el-table-column label-class-name="first-column" type="selection" width="55px"></el-table-column>
          <el-table-column label="" width="100px" fixed>
            <template #default="scope">  
              <el-image :src="Path.imgPath + scope.row.imgs" alt="商品图片" style="width: 50px; height: 50px;"/>  
            </template> 
          </el-table-column>
          <el-table-column fixed prop="name" label="商品名称" width="400px">
            <template #header>  
            <span>商品名称 </span> <!-- 假设你想在表头旁边添加一个箭头 -->  
        </template>  
          </el-table-column>
          <el-table-column prop="price" label="价格" width="150px" />
          <el-table-column prop="store" label="库存" width="150px" />
          <el-table-column prop="sales" label="累计销量" width="150px" />
          <el-table-column prop="createTime" label="创建时间" width="200px" />
          <el-table-column label="操作" label-class-name="end-column" width="150px">  
            <template #default="scope">  
              <el-button size="small" @click="handleEdit(scope.row.id)">  
                恢复
              </el-button>  
              <el-button  
                size="small"  
                type="danger"  
                @click="handleDelete(scope.row.id)" 
              >  
                删除  
              </el-button>  
            </template>  
          </el-table-column>  
        </el-table>
   </div> 
     <div class="example-pagination-block">
          <el-pagination 
          @size-change="getTableDate"  
            @current-change="getTableDate"  
            v-model:current-page="currentPage"   
            :page-size="pageSize"  
            layout="total, prev, pager, next, jumper"  
            :total="rawData.total"
            background
          />
        </div>
</template>


<script setup>
import { ref,computed } from 'vue';
import { get,post } from "@/plugins/axios"
import { Path } from "@/constant/index"
import { ElMessage,ElMessageBox } from 'element-plus';


const rawData = ref([])

// 当前页码  
const currentPage = ref(1);  
// 每页显示的条目数  
const pageSize = ref(6);  
  
// 弹出框
const selectedOption = ref('');  
const popoverVisible = ref(false);

// 多选部分
// 用于存储被选中的行  
const selectedRows = ref([]);    
const selectedIds = [];
// Element UI 的 ref 引用  
const multipleTableRef = ref(null); 
// 处理选择变更的事件  
function handleSelectionChange(val) {  
  selectedRows.value = val; // val 是被选中的行的 keys 数组（如果设置了 row-key）  
  console.log(selectedRows.value); // 查看被选中的行的 keys  
}  
function batchRehabilitation(){
  if(selectedRows.value.length == 0){
    ElMessage.warning("请进行选择")
    return
  }
  const selectedIds = [];    
  for (const row of selectedRows.value) {   
    selectedIds.push(row.id);  
  } 
  post(Path.businessUpdateGoodsStateBatch,{
    ids: selectedIds,
    stateUser: 0 
  },content => {
    getTableDate()
  })
}


// 排序部分
const sortRule = ref([])
const goodsTypeValue = ref(null)
const goodsName = ref(null)
getTableDate()
function getTableDate(){
  get(Path.businessGetGoods,{
    pageNo: currentPage.value,
    pageSize: pageSize.value,
    sortType: sortRule.value[0],
    sortDetail: sortRule.value[1],
     typeId: goodsTypeValue.value,
    goodsName: goodsName.value,
    stateUser: -1,
  }, content => {
    rawData.value = content
  })
}

// 分类部分
const goodsType = ref([])
getGoodsType()
const props = {
  multiple: false,
  emitPath: false,
  label: 'name',
  value: 'id',
  children: 'children',
  expandTrigger: 'click'
}
// 获取数据
function getGoodsType(){
  get(Path.categoryList,null,content => {
    goodsType.value = content
  })
}
function clearType(){
  goodsTypeValue.value = null;
  getTableDate()
}
  

// 弹出框选项
function handleCommand(command) {  
selectedOption.value = command;  
popoverVisible.value = false;
}  

function handleEdit(id){
    post(Path.businessUpdateGoodsState,{
      id: id,
      state: 0
    }, content => {
      getTableDate()
    })
}
function handleDelete(row){
   ElMessageBox.confirm(
    '请确认，是否要将其永久删除',
    '警告',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      post(Path.businessDeleteGoods,{
        id: row
      },content => {
        getTableDate()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

function batchDel(){
   ElMessageBox.confirm(
    '请确认，是否要将其永久删除',
    '警告',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>

<style lang="scss" scoped>

//店铺类型样式
.shop_type{
    margin-left: 4%; 
    background-color: #f2f4f7;
    display: flex;
    align-items: center; 
    text-align: center;
    border: 1px solid #dcdfe6; // 添加默认边框
    border-radius: 8px;;
}
.shop_type:hover{
    background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}


// 输入框样式和触发事件
::v-deep .el-input__wrapper {
    background-color: #f2f4f7;
    border-radius: 5px;
    border: 1px solid #dcdfe6; // 添加默认边框
    border-radius: 8px;
   
  }
::v-deep .el-input__wrapper:hover {
  background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}

.my-popover{

}

// 店铺选项样式
.my-dropdown-menu {
  background-color: #f2f4f7;
  padding: 0;
  margin: 0;
  list-style: none;
  border-width: 0;
  border-color:#f2f4f7 ;

  .my-dropdown-item {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f2f4f7;
    &:hover {
      background-color: #fff;
      transition: background-color 0.3s ease, border-color 0.3s ease; 
    }
  }
}

// 请选择 字体的样式
.el-dropdown-link{
    width: 200px;
    font-size: large; 
    margin-left: 5%;
}

// 搜索按钮样式
.search{
    width: 88px;
    height: 36px;
    margin-top: 3px;
    border-radius: 15px;
    margin-left: 40px;
}
//批量恢复到仓库按钮样式
.recycle{
  width: 150px;
    height: 36px;
    margin-top: 1%;
    border-radius: 15px;
    margin-bottom: 20px;
}

// 搜索内样式
.el-button--info {
  --el-button-text-color: #000000;
  --el-button-bg-color:#fff;
  --el-button-hover-text-color: #000000;
  --el-button-hover-bg-color:  #f2f4f7;;
}
//分页的样式
.example-pagination-block {
  margin-top: 10px;
  display: flex;
  margin-left: 450px;
  height: 50px;
  margin-bottom: 16px;
}
/* 
  表头
*/
.el-tb {
  ::v-deep .tb-header {
    border-radius: 15px;
    overflow: hidden;
    th {
      background-color: #f2f4f7;
      color: #000;
      font-size: medium;
      height: 61px;
    }
    .first-column {
      border-radius: 20px 0 0 20px;
    }
    .end-column {
      border-radius: 0 20px 20px 0;
      padding-left: 35px;
    }
  }
}
// 删除按钮样式
.delete{
  width: 88px;
  height: 36px;
  margin-top: 1%;
  border-radius: 15px;
}
.reset_sort{
  width: 88px;
  height: 36px;
  margin-top: 2%;
  border-radius: 15px;
}
</style>